
import React, { Component } from 'react';
import { Text, View,StyleSheet } from 'react-native';
import { Button, InputItem,Toast } from 'antd-mobile-rn';
import constants from '../../utils/constants';

const styles = StyleSheet.create({
    InputItemView:{
        padding: 20,
        paddingBottom: 0,
        width:"100%",
        paddingRight:40

    }
});

export default class ForgetPassword extends Component{


    timer = null

    constructor(props){
        super(props);
        this.state = {
            phone:"",
            password:"",
            code:"",
            confirmPassword:"",
            extraText:"发送验证码",
            isExtraClick:false
        }
    }

    clearTimer = ()=>{
        if(this.timer != null){
            clearInterval(this.timer);
        }
    }

    componentWillUnmount(){
        this.clearTimer();
    }

    handleLogin = () =>{
        
    }

    handleExtraClick = ()=>{
        if(this.state.isExtraClick){
            return;
        }
        this.setState({
            isExtraClick:true
        });
        let i = 60;
        this.timer = setInterval(()=>{
            this.setState({
                extraText:i+"秒后重发"
            });
            i--;
            if(i <= 0){
                this.clearTimer();
                this.setState({
                    isExtraClick:false,
                    extraText:"发送验证码"
                });
            }
        },1000);
        Toast.info("send message text")
    }

    render(){
        const extraText = <Text style={{marginRight:0}}>{this.state.extraText}</Text>
        return (
            <View style={{backgroundColor:"white",flex:1}}>
            <View style={styles.InputItemView}>
                <InputItem
                    clear
                    type="phone"
                    value={this.state.phone}
                    onChange={(value) => {
                        this.setState({
                            phone: value,
                        });
                    }}
                    placeholder="+86"
                   
                >
                    <Text>手机号码：</Text>
                </InputItem>
            </View>
            <View style={styles.InputItemView}>
                <InputItem
                    clear
                    type="number"
                    value={this.state.code}
                    onChange={(value) => {
                        this.setState({
                            code: value,
                        });
                    }}
                    extra={extraText}
                    style={{paddingRight:0}}
                    onExtraClick={this.handleExtraClick}
                  
                >
                    <Text>手机验证：</Text>
                </InputItem>
            </View>
            <View style={styles.InputItemView}>
                <InputItem
                    clear
                    type="password"
                    value={this.state.password}
                    onChange={(value) => {
                        this.setState({
                            password: value,
                        });
                    }}
                   
                >
                    <Text>重置密码：</Text>
                </InputItem>
            </View>
            <View style={styles.InputItemView}>
                <InputItem
                    clear
                    type="password"
                    value={this.state.confirmPassword}
                    onChange={(value) => {
                        this.setState({
                            confirmPassword: value,
                        });
                    }}
                   
                >
                    <Text>确认密码：</Text>
                </InputItem>
            </View>
            <View style={{padding:30,marginTop:20}}>
                <Button onClick={this.handleLogin} activeStyle={{backgroundColor:constants.themeColor}} type="primary" style={{backgroundColor:constants.themeColor,borderColor:'white'}}>重置密码</Button>
            </View>
            
        </View>
        )
    }

}